export default {
  ctx: '',
  startAngle: (5 / 6) * Math.PI,
  endAngle: (13 / 6) * Math.PI,
  nowAngle: 0,
  lineWidth: 16,
  outerWidth: 2,
  splitWidth: 5,
  x: 300,
  y: 270,
  r1: 250,
  r2: 260,
  lineX: 0,
  lineY: 0,
  initData: function (el,val) {
    clearInterval(this.t)
    if(!this.ctx) {
      this.ctx = el.getContext('2d');
      this.drawBack()
    } else {
      this.drawVal(val)
    }
  },
  drawBack: function (){
    this.ctx.clearRect(0,0,600, 600)
    //绘制背景底盘
    this.ctx.beginPath();
    this.ctx.arc(this.x, this.y, this.r1, this.startAngle, this.endAngle)
    this.ctx.strokeStyle = '#4e6a68';
    this.ctx.lineWidth = this.lineWidth;
    this.ctx.setLineDash([0]);
    this.ctx.stroke();
    this.ctx.beginPath();
    this.ctx.arc(this.x, this.y, this.r2, this.startAngle, this.endAngle);
    this.ctx.strokeStyle = '#4e6a68';
    this.ctx.lineWidth = 5;
    this.ctx.setLineDash([this.outerWidth, this.splitWidth]);
    this.ctx.stroke();
  },
  drawVal: function (val){
    //绘制填充颜色部分
    this.clearRadius()
    this.nowAngle = this.startAngle + (this.endAngle - this.startAngle)*val
    this.ctx.beginPath();
    this.ctx.strokeStyle = '#18c9b2';
    this.ctx.arc(this.x, this.y, this.r1, this.startAngle, this.nowAngle);
    this.ctx.lineWidth = this.lineWidth;
    this.ctx.setLineDash([0]);
    this.ctx.stroke();

    this.ctx.beginPath();
    this.ctx.arc(this.x, this.y, this.r2, this.startAngle, this.nowAngle);
    this.ctx.lineWidth = this.outerWidth;
    this.ctx.setLineDash([this.outerWidth, this.splitWidth]);
    this.ctx.stroke();

    //绘制表针
    this.clearLine()
    this.ctx.beginPath(); //开始
    this.ctx.lineWidth = 12; // 针的宽度
    this.ctx.setLineDash([0]);
    this.ctx.lineCap = "round"; //针头为圆角
    this.ctx.strokeStyle = "#18c9b2";
    this.ctx.moveTo(300, 270);
    this.lineX = 220*Math.cos(this.nowAngle)+300
    this.lineY = 220*Math.sin(this.nowAngle)+270
    this.ctx.lineTo(this.lineX, this.lineY);
    this.ctx.stroke(); //绘制轮廓圆
  },
  clearRadius() {
    if (this.nowAngle) {
      this.ctx.beginPath();
      this.ctx.strokeStyle = '#4e6a68';
      this.ctx.arc(this.x, this.y, this.r1, this.startAngle, this.nowAngle);
      this.ctx.lineWidth = this.lineWidth;
      this.ctx.setLineDash([0]);
      this.ctx.stroke();

      this.ctx.beginPath();
      this.ctx.arc(this.x, this.y, this.r2, this.startAngle, this.nowAngle);
      this.ctx.lineWidth = this.outerWidth;
      this.ctx.setLineDash([this.outerWidth, this.splitWidth]);
      this.ctx.stroke();
    }
  },
  clearLine() {
    if (this.lineX || this.lineY) {
      this.ctx.beginPath(); //开始
      this.ctx.lineWidth = 12; // 针的宽度
      this.ctx.setLineDash([0]);
      this.ctx.lineCap = "round"; //针头为圆角
      this.ctx.strokeStyle = "#000";
      this.ctx.moveTo(300, 270);
      this.ctx.lineTo(this.lineX, this.lineY);
      this.ctx.stroke(); //绘制轮廓圆
    }
  }
}